@extends('Home.common.header')
<!-- 1.添加meta csrf_token -->
<meta name="csrf-token" content="{{ csrf_token() }}"> 

<!-- 发光搜索 -->
<link rel="stylesheet" href="{{ asset('css/style.css') }}" media="screen" type="text/css" />

<!-- js代码 -->
<script src=" {{ asset('/js/jquery-1.8.3.min.js') }} "></script>
<script type="text/javascript" >
	
	// 加边框
	function addBorder( id )
	{
		// 图片对象
		var img = document.getElementById('pic_'+id);
		// 加边框
		img.style.border = '1px solid #FF4040';
	}
	
	// 边框变化
	function down(id)
	{
		var img = document.getElementById("pic_"+id);
		img.style.border = '1px solid #ffffff';
	}
	
	
	// 增加数量
	function addNum( com_id )
	{
		// 获取输入框内 的数量
		var saleNum = parseInt( $("input[com_id="+com_id+"]").val() );
		// 加1
		saleNum++;
		// 获取sku的库存
		var stock = parseInt( $("input[com_id="+com_id+"]").attr('stock') );
		if( saleNum > stock )
		{
			alert('土豪！ 只能买这么多了');
			return false;
		}
		// 1.设置 购买数量
		$("input[com_id="+com_id+"]").val( saleNum );
	}
	
	// 减少数量 
	function delNum( com_id )
	{
		// 获取输入框里的数量
		var saleNum = parseInt( $("input[com_id="+com_id+"]").val() );
		// 减1
		saleNum--;
		if( saleNum<1 )
		{
			alert('客官 不能再减了');
			return false;
		}
		// 1.设置 购买数量
		$("input[com_id="+com_id+"]").val( saleNum );
	}
	
	// 商品列表页 购物车 只能 操作 添加 数量为（1 -- 库存）
	// 添加到购物车 商品ID
	function addToCart( com_id ){
		
		// 获取输入框里的数量
		var saleNum = parseInt( $("input[com_id="+com_id+"]").val() );
		
		// 添加购物车 	
		$.ajax({
			type:"post",
			url:"{{ url('/insertCart') }}",
			// 商品ID 和 购买数量 
			data:{id:com_id,num:saleNum,_token:_token},
			async:false,    					
			dataType:"html",
			success:function(back){
				if( back!='' ){
					$(function(){
						// 设置提示内容
						$( "#show_"+com_id ).html(back);
						$( "#show_"+com_id ).slideDown(1000,function(){
							location.reload();
						});
					})
				}
			}
		});
			
	}


</script >
	
<br/><br/>


<!--  搜索框  -->
<form action="{{ url('/getComs') }}" method='post' >
	
	{{ csrf_field() }}
	<div class="wrap" style="width:88%;margin-left:6%;margin-top:10px;">
		<input type="text" placeholder="输入要搜索的商品名称" name='keyword' id="input" value="{{ $request or '' }}" />
		<input type="submit" class="btn btn-success" value="搜索" id="button" >
		
		<!--<a href="{{ '/' }}" class="btn btn-success" style="position:absolute;top:5px;margin-left:990px;height:35px;cursor:pointer;">清空条件</a>-->

	</div>
</form>


@forelse ($coms as $com_info)
	<!-- 单个商品列表模板 -->
	<div style="border:1px solid #787878;width:320px;height:430px;margin-left:77px;background:#EAEAEA;border-radius:5px;float:left;margin-bottom:50px;margin-top:0px;">
		
		<!-- 商品名 -->
		<div style="width:40%;font-size:21px;text-align:left;margin-top:10px;margin-left:40px;float:left;">
			{{ $com_info->name }}
		</div>
		
		<!-- 提示信息 -->
		<div style="width:120px;height:30px;margin-top:15px;margin-left:20px;text-align:right;margin-bottom:10px;float:left;">
			<b  id="show_{{ $com_info->id }}" style="display:none;font-size:16px;color:#FF3030;" ></b>
		</div>
		
		<!-- 图片 -->
		<div style="width:75%;margin:0 auto;height:200px;">
			<a href="{{ url('/comDetail') }}/{{ $com_info->id }}" >
				<img style="width:100%;border-radius:5px;" src="{{ asset('/images/coms') }}/{{ $com_info->pic_url }}" onmouseover="addBorder( {{ $com_info->id }} )" onmouseout="down({{ $com_info->id }});" id="pic_{{ $com_info->id }}" />
			</a>
		</div>
		
		<!-- 价格 -->
		<div style="width:80%;height:30px;margin-left:40px;font-size:21px;margin-top:45px;">
			{{ $com_info->price }}起
		</div>
		
		<!-- 描述 -->
		<div style="width:80%;height:30px;margin-top:10px;margin-left:40px;;margin-bottom:10px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;">
			{{ $com_info->description }}
		</div>
		
		<!-- + - 按钮 -->
		<div style="width:100%;height:40px;border:1px solod red;">
		<!-- 正常 新品 -->
		@if( $com_info->status==1 || $com_info->status==3 )
			<!-- + -->
			<button onclick="addNum({{ $com_info->id}});" class="glyphicon glyphicon-plus" aria-hidden="true" style="float:left;margin-left:40px;margin-top:10px;background:rgba(0,0,0,0);border:0px solid red;" ></button>
			<!-- 输入框 -->
			<input com_id="{{ $com_info->id}}" stock=" {{ $com_info->stock}} " type="text" class="form-control" value='1' style="float:left;width:50px;height:30px;margin-left:5px;margin-top:2px;text-align:center;" />
			<!-- - -->
			<button onclick="delNum({{ $com_info->id}});"  class="glyphicon glyphicon-minus" aria-hidden="true" style="float:left;margin-left:5px;background:rgba(0,0,0,0);border:0px solid red;margin-top:10px;"></button>
			<!-- 库存 -->
			<div style="float:left;margin-top:7px;margin-left:25px;color:#FF4500;font-size:16px;" >
				库存 : {{ $com_info->stock }}
			</div>
		@else
			<!-- + -->
			<button disabled class="glyphicon glyphicon-plus"  style="float:left;margin-left:40px;margin-top:10px;background:rgba(0,0,0,0);border:0px solid red;" ></button>
			<!-- 输入框 -->
			<input disabled type="text" class="form-control" value='0' style="float:left;width:50px;height:30px;margin-left:5px;margin-top:2px;text-align:center;" />
			<!-- - -->
			<button disabled class="glyphicon glyphicon-minus"  style="float:left;margin-left:5px;background:rgba(0,0,0,0);border:0px solid red;margin-top:10px;"></button>
			<!-- 库存 -->
			<div style="float:left;margin-top:7px;margin-left:25px;color:#FF4500;font-size:16px;" >
				库存 : {{ $com_info->stock }}
			</div>
		@endif
		</div>
		
		<!-- 按钮 -->
		<div style="width:100%;height:60px;margin-top:10px;">
			@if( $com_info->status==2 )
				<button style="float:left;width:250px;margin-left:35px;" class="btn btn-info btn-danger" disabled >
					商品已下架
				</button>
			@elseif( $com_info->status==4 )
				<button style="float:left;width:250px;margin-left:35px;" class="btn btn-info btn-danger" disabled >
					暂无库存
				</button>
			@else
				<button type="button" class="btn btn-danger" style="float:left;width:250px;margin-left:35px;" onclick="addToCart( {{ $com_info->id }} );">
					加入购物车
				</button>
			@endif
		
		</div>

		
	</div>
	
	<script type="text/javascript" >	
	
			$(function(){
				
				// 数量 输入框 失去焦点 判断
				$("input[com_id="+{{ $com_info->id }}+"]").blur(function(){
					// 获取sku的库存
					var stock = parseInt( $(this).attr('stock') );
					// 购买量
					var saleNum = $(this).val();
					// 不是数字
					if( isNaN(saleNum) )
					{
						saleNum=1;
					}
					// 浮点数 转整
					var saleNum = parseInt( saleNum );
					if( saleNum<1 )
					{
						saleNum = 1;
					}
					// 失去焦点 做判断
					if( saleNum > stock ){
						saleNum = stock;
						$(this).val(saleNum);
						//alert('土豪！最多只能选择'+stock+'件商品');
						return false;
					}
					// 1.设置 购买数量
					// 如果是字符串 也进行了转换
					$(this).val(saleNum);
				});
				
			})
		</script>
	
	
@empty
	<h2 style="margin-left:80px;">暂无商品</h2>
@endforelse


<!-- 分页 -->
<div class="badge" style='text-align:center;width:100%;'>
@if( isset($request) )
	{{ $coms->appends(['keyword'=>$request])->links() }}
@else
	{{ $coms->links() }}
@endif

</div>

@if( $coms->total()>0 )
	<div class="badge" style="width:100%;text-align:center;font-size:18px;margin-bottom:70px;" >
			共{{ $coms->total() }}条数据
	</div>
@else
@endif





@extends('Home.common.footer')